<template>
  <div class="item" @click="toggleDetail(item.name)">
    {{ item.name }}
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { mapMutations } from "vuex";
export default {
  props: {
    item: {
      type: Object,
    },
  },
  setup() {
    const state = reactive({
      toggleDetail(val) {
        this.changeTitle(val);
        this.$router.push("/detail")
      },
      ...mapMutations(["changeTitle"]),
    });
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>

<style scoped>
.item {
  line-height: 40px;
}
</style>